import React from 'react'
import { connect } from 'dva'
import { Card,Table } from 'antd'



/**
 * MonthlyReturn 月度回报
 * 引用组件
 * MonthlyReturnList 月度回报统计表
 */
import PeriodReplayToolBar from './PeriodReplayToolBar'
import TabsMain from '../../../components/TabsMain'
import ReplayList from './ReplayList'
class PeriodReplayTables extends React.Component {
  state={
    fund:this.props.fund,
    begindate:this.props.begindate,
    enddate:this.props.enddate,
    firstdate:this.props.firstdate,
    lastdate:this.props.lastdate,
    traderListData:this.props.traderListData,
    stocklistData:this.props.stocklistData,
    pnlListData:this.props.pnlListData,
    tradeYieldListData:this.props.tradeYieldListData,
    marketYieldListData:this.props.marketYieldListData,
    utilizationListData:this.props.utilizationListData,
  }
  // componentDidMount() {
  //   this.fetchData(this.props)
  // }
  // componentWillMount() {
  //   this.fetchData(this.props)
  // }
  componentWillReceiveProps(nextProps) {
    console.log('PeriodReplayTables->nextProps',nextProps,this.props)
    if ((nextProps.periodReplay.begindate !== this.props.periodReplay.begindate) 
      || (nextProps.periodReplay.enddate !== this.props.periodReplay.enddate)
      || (nextProps.periodReplay.fund !== this.props.periodReplay.fund)) {
      this.fetchData(nextProps)
    }
    if (nextProps.periodReplay.teamSumStat !== this.props.periodReplay.teamSumStat) {
      const teamSumStat=nextProps.periodReplay.teamSumStat
      const traderListData = teamSumStat.traderlist
      const stocklistData = teamSumStat.stocklist
      const dataDate = teamSumStat.dataDate
      const pnlListData = [], tradeYieldListData = [], marketYieldListData = [], utilizationListData = []
      teamSumStat.stocklist.map((item, i) => {
        const row = teamSumStat.traderstockstats.filter((it, ii) => it.symbol === item.symbol)
        // 总盈亏
        const pnlItemObj = {}
        pnlItemObj.key = i
        pnlItemObj.stockname = item.stockname
        row.map((it, ii) => {
          const data = it.pnl
          eval(`pnlItemObj.trader_${it.trader}=data`)
        })
        pnlListData.push(pnlItemObj)
        // 平均交易收益率
        const tradeYieldItemObj = {}
        tradeYieldItemObj.key = i
        tradeYieldItemObj.stockname = item.stockname
        row.map((it, ii) => {
          const data = it.tradeyield
          eval(`tradeYieldItemObj.trader_${it.trader}=data`)
        })
        tradeYieldListData.push(tradeYieldItemObj)
        // 市值收益率
        const marketYieldItemObj = {}
        marketYieldItemObj.key = i
        marketYieldItemObj.stockname = item.stockname
        row.map((it, ii) => {
          const data = it.marketyield
          eval(`marketYieldItemObj.trader_${it.trader}=data`)
        })
        marketYieldListData.push(marketYieldItemObj)
        // 利用率
        const utilizationItemObj = {}
        utilizationItemObj.key = i
        utilizationItemObj.stockname = item.stockname
        row.map((it, ii) => {
          console.log('>>>>>it',it)
          if(it.utilization !== null){
            const data = Math.signFigures(it.utilization * 100) + '%';
            eval(`utilizationItemObj.trader_${it.trader}=data`)
          }
          
        })
        utilizationListData.push(utilizationItemObj)
        console.log('>>>>>',utilizationListData)
      })
      this.setState({
        begindate:nextProps.begindate||dataDate,
        enddate:nextProps.enddate||dataDate,
        firstdate:nextProps.firstdate,
        lastdate:nextProps.lastdate,
        traderListData,
        stocklistData,
        pnlListData,
        tradeYieldListData,
        marketYieldListData,
        utilizationListData,
      })
    }
  }
  fetchData=(props)=>{
    console.log('PeriodReplayTables->props',props)
    if(props.begindate&&props.enddate){
      this.props.dispatch({
        type:'periodReplay/getTeamSumStat',
        payload:props
      })
    }else{
      this.props.dispatch({
        type:'periodReplay/getTeamSumStat',
      })
    }
  }
  render() {
    // const { 
    //   begindate,
    //   enddate,
    // } = this.props
    const { 
      begindate,
      enddate,
      firstdate,
      lastdate,
      traderListData,
      stocklistData,
      dataDate, 
      pnlListData, 
      tradeYieldListData, 
      marketYieldListData, 
      utilizationListData
    } = this.state

    console.log('PeriodReplayTables->state',this.state)
    const toolbar=(
      <PeriodReplayToolBar 
        firstdate={firstdate} 
        lastdate={lastdate} 
        begindate={begindate} 
        enddate={enddate} 
      />
    )
    return (
      <TabsMain extra={toolbar}>
        <ReplayList title='累计收益' traderList={traderListData} data={pnlListData} total={true}  />
        <ReplayList title='平均交易收益率' traderList={traderListData} data={tradeYieldListData} total={true} />
        <ReplayList title='市值收益率' traderList={traderListData} data={marketYieldListData} />
        <ReplayList title='利用率' traderList={traderListData} data={utilizationListData} />
      </TabsMain>
    )
  }
}

PeriodReplayTables.defaultProps={
  begindate:null,
  enddate:null,
  fund:null,
  traderListData:[],
  stocklistData:[],
  pnlListData:[], 
  tradeYieldListData:[], 
  marketYieldListData:[], 
  utilizationListData:[]
}

export default connect(({ periodReplay }) => ({ periodReplay }))(PeriodReplayTables)
